<!-- 城市地铁管理 -->
<template>
  <div class="citySubwayManage">
    <el-form :inline="true" :model="searchForm">
      <el-form-item prop="province" label="省份：">
        <el-select v-model.trim="searchForm.province" placeholder="省" @change="loadCity">
          <el-option
            v-for="(item,index) in provinceOptions"
            :key="index"
            :label="item.province"
            :value="item.provinceid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="city" label="城市：">
        <el-select v-model.trim="searchForm.city" placeholder="市">
          <el-option
            v-for="(item,index) in cityOptions"
            :key="index"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList(1)" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="viewList('add')">添加</el-button>
      </el-form-item>
    </el-form>
    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableChangeBtns="tableChangeBtns"
      :hasSera="true"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
    <lineDialog
      :type="lineType"
      :editform="updateForm"
      :visible.sync="lineVisible"
      @updateLine="searchList(1)"
    ></lineDialog>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import tableList from "./tableList";
import lineDialog from "./changeLine";
export default {
  name: "citySubwayManage",
  title:'城市地铁管理',
  components: {
    "table-list": tableList,
    lineDialog,
  },
  data() {
    return {
      searchForm: {
        province: "",
        city: ""
      },
      updateForm: {},
      lineVisible: false,
      lineType: "add",
      provinceOptions: [],
      cityOptions: [],
      tableInfos: [
        { label: "省份", prop: "province" },
        { label: "城市", prop: "city" },
        { label: "线路", prop: "railName" },
        { label: "操作", prop: "changeBtn" }
      ],
      tableChangeBtns: [
        { label: "编辑", type: "edit", fn: this.viewList },
        { label: "删除", type: "dele", fn: this.deleteItem },
        { label: "站点管理", type: "manage", fn: this.manage }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0
    };
  },
  methods: {
 
    addLine(){},
    handleClick() {},
    //新增查看编辑
    viewList(type, idx) {
      let row = this.tableData[idx];
      this.lineType = type;
      if (row) {
        this.updateForm = {
          city: row.cityid,
          province: row.provinceid,
          rwName: row.railName,
          railId:row.railId
        };
      }

      this.lineVisible = true;
    },
    //删除
    deleteItem(type, idx) {
      this.$confirm(`确定要删除当前列表吗？`, "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          let params = {
            id: this.tableData[idx].railId
          };
          this.$axios
            .post("/city/sysCityRailway/deleteCityRailway", params)
            .then(res => {
              this.tableData.splice(idx, 1);
              this.$message({
                type: "success",
                message: "已删除"
              });
              this.searchList();
            });
        })
        .catch(() => {});
    },
    manage(type,idx,row) {
      console.log(row)
      this.$router.push({
        path: "/siteManage",
        query: { row: row }
      });
    },
    searchList(pageNum) {
      this.pageNum = pageNum || this.pageNum;
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        provinceid: this.searchForm.province,
        cityid: this.searchForm.city
      };
      this.$axios
        .post("/city/sysCityRailway/getAllCityRailway", param)
        .then(res => {
          this.tableData = res.list;
          this.totalSize = res.total;
        });
    },

    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    },
    //获取省
    loadprovinces() {
      this.$axios.get("/city/provinces").then(res => {
        this.provinceOptions = res;
      });
    },
    //获取市
    loadCity(provinceId) {
      this.$set(this.searchForm, "city", null);
      this.$axios.get(`/city/cityList/${provinceId}`).then(res => {
        this.cityOptions = res.cityList;
      });
    }
  },
  created() {
    this.loadprovinces();
    this.searchList();
  },
  activated(){
    this.searchList(1);
  },
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus" scoped>
.citySubwayManage {
}
</style>
